<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
<!--    <a-drawer-->
<!--            :title="!dataForm.id ? '添加' : '修改'"-->
<!--            :visible="visible"-->
<!--            @close="cancel"-->
<!--            :body-style="{ paddingBottom: '80px' }"-->
<!--            :width="1000"-->
<!--    >-->
  <div class="divBox relative">
    <el-card class="box-card" style="min-height: 80vh">
      <!-- 新增和创建表单表单 -->
      <div class="hasTagsView">
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule"  v-loading="loading" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="80px" style="padding: 0px 10px;margin: 0px 10px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="dataForm.title" placeholder="请输入标题" size="small"></el-input>
      </el-form-item>
      <el-form-item label="图片" prop="bannerimg">
      <upload-img text="图片" :fileListValue="dataForm.bannerimg" v-model="dataForm.bannerimg" :content="{'compress':true}"/>
    </el-form-item>

    <el-form-item label="付费类型"   prop="type">

      <el-select v-model="dataForm.type" placeholder="请选择付费类型" class="width100" filterable>
        <el-option
          v-for="item in selOptions.freeType"
          :key="item.value"
          :value="item.value"
          :label="item.label">
        </el-option>
      </el-select>

    </el-form-item>

      <el-form-item label="分类" prop="categoryid">
        <el-select v-model="dataForm.categoryid" placeholder="请选择分类" class="width100" filterable>
          <el-option
            v-for="item in categoryList"
            :label="item.name"
            :key="item.id"
            :value="item.id">
          </el-option>
        </el-select>

    </el-form-item>
    <el-form-item label="客服链接" >
      <el-input v-model="dataForm.serverurl" placeholder="请输入客服链接" size="small"></el-input>
    </el-form-item>
    <el-form-item label="内容" >
      <Tinymce v-model="dataForm.content" :value="dataForm.content"></Tinymce>
    </el-form-item>
    <el-form-item label="资源" >
      <Tinymce v-model="dataForm.result" :value="dataForm.result" :height="200"></Tinymce>
    </el-form-item>
    <el-form-item label="排序" >
      <el-input type="number" v-model="dataForm.sortnum" placeholder="请输入排序" size="small"></el-input>
    </el-form-item>
      <el-form-item label="状态" >
        <el-select v-model="dataForm.status" placeholder="请选择" class="width100" filterable>
          <el-option
            v-for="item in selOptions.statusType"
            :key="item.value"
            :value="item.value"
            :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
        <div :style="{position: 'absolute',right: 0,bottom: 0,width: '100%', borderTop: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',textAlign: 'right',zIndex: 1,}">
            <el-button @click="cancel()" :style="{ marginRight: '8px' }">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </div>
<!--  </a-drawer>-->
      </div>
    </el-card>
  </div>
</template>
<script>
    import api from '@/api/api'
    import Tinymce from '@/components/Tinymce/index'
    import uploadImg from '@/components/Upload/uploadImg.vue'
    export default {
    components: {
      uploadImg,
      Tinymce
    },
    data () {
      return {
        visible: false,
        loading:false,
        selOptions:{},
        categoryList:[],
        dataForm: {
          id: 0,
          bannerimg: '' ,
          title: '' ,
          tag: '' ,
          type: '' ,
          serverurl: '' ,
          categoryid:'',
          content: '' ,
          result: '' ,
          sortnum: '' ,
          status: ''
        },
        dataRule: {
          bannerimg: [
            { required: true, message: '图片  为必填项', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '标题  为必填项', trigger: 'blur' }
          ],
          categoryid: [
            { required: true, message: '分类  为必填项', trigger: 'blur' }
          ],
          tag: [
            { required: true, message: '类型：0：不跳转，1跳转  为必填项', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '类型，0：免费，1：付费  为必填项', trigger: 'blur' }
          ],
          serverurl: [
            { required: true, message: '客服链接  为必填项', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '内容  为必填项', trigger: 'blur' }
          ],
          result: [
            { required: true, message: '资源  为必填项', trigger: 'blur' }
          ],
          sortnum: [
            { required: true, message: '排序  为必填项', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '状态  为必填项', trigger: 'blur' }
          ],
          orgid: [
            { required: true, message: '机构ID  为必填项', trigger: 'blur' }
          ],
          createtime: [
            { required: true, message: '创建时间  为必填项', trigger: 'blur' }
          ],
          updatetime: [
            { required: true, message: '更新时间  为必填项', trigger: 'blur' }
          ]
        }
      }
    },
      mounted() {
       // this.$route.hash.replace('#','')
       // console.error(this.$route.hash.replace('#',''))
        this.init(this.$route.hash.replace('#',''))
      },
    methods: {
      init (id) { // 初始化表单验证规则
        this.dataForm.id = id || undefined
        this.visible = true
        this.getCategoryList()
        this.selOptions=this.$constants.selOptions;
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id){
              this.loading = true
                api.post('rest/vabc/contentinfo/info',{id:this.dataForm.id}).then(res => {
                this.dataForm = res;
            }).finally(() => {
                this.loading = false
            });
          }
        })
      },
      // 表单数据提交
      submit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            let postData=Object.assign({},this.dataForm)
            if (!this.dataForm.id){
                postData.id==undefined
                api.post('rest/vabc/contentinfo/save',postData).then(res =>{
                    this.$message.success("创建成功")
                    this.cancel()
                    this.visible = false
                    // this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }else{
                api.post('rest/vabc/contentinfo/update',postData).then(res =>{
                    this.$message.success("保存成功")
                    this.cancel()
                    this.visible = false
                    //this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }
          }
        })
      },
     cancel(){
       this.$store.dispatch("tagsView/delView", this.$route);
       this.$router.go(-1)
        this.visible = false
        this.reset()
    },
    reset(){
        this.$refs.dataForm.resetFields()
        this.$data.dataForm=JSON.parse(JSON.stringify(this.$options.data().dataForm))
        //图片回写
        //this.$refs["childData"].fileList=[]
    },
      getCategoryList () {
        let postData={
          'order':'desc',
          'column':'sortnum,updatetime',
          'pageSize':1000,
          'pageIndex':1,
          'status':0
        }
        api.post('rest/vabc/category/list',postData).then(res => {
          this.categoryList=res.datalist
        }).finally(() => {
        });
      },
    }
  }
</script>
